<template>
  <view class="container">
    <!-- 顶部统计区域 -->
    <view class="stats-card">
      <!-- 居中布局容器 -->
      <view class="stats-container">
        <!-- 左侧统计数据 -->
        <view class="left-stats">
          <view class="stat-item">
            <text class="stat-label">刷题数:</text>
            <text class="stat-value">{{ totalQuantity }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">错题数:</text>
            <text class="stat-value">{{ mistakesQuantity }}</text>
          </view>
        </view>

        <!-- 右侧错题率圆环 -->
        <view class="right-circle">
          <text class="circle-value">{{ totalQuantity ? ((mistakesQuantity / totalQuantity) * 100).toFixed(2) : '0.00' }}%</text>
          <text class="circle-label">错题率</text>
        </view>
      </view>
    </view>

    <!-- 题型选择区域 -->
    <view class="question-types">
      <view class="type-item" @click="goToQuestionPage('single')">
        <IconFont  :name=radio size="42" />
        <text class="type-text">单选题</text>
      </view>
      <view class="type-item" @click="goToQuestionPage('multiple')">
        <IconFont  :name=multiple size="42" />
        <text class="type-text">多选题</text>
      </view>
      <view class="type-item" @click="goToQuestionPage('judge')">
        <IconFont  :name=judge size="42" />
        <text class="type-text">判断题</text>
      </view>
    </view>

    <!-- 刷错题按钮 -->
    <view class="btn-container">
      <nut-button @click="goToQuestionPage('all')" type="primary" class="review-btn">
        刷错题
      </nut-button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import config from '../../config';
import { IconFont } from '@nutui/icons-vue'
import Taro from '@tarojs/taro';
//图标资源
const radio = ref(require('../../assets/单选.png'))
const multiple = ref(require('../../assets/多选.png'))
const judge = ref(require('../../assets/判断.png'))
//接收后台数据的类型
const indexData = ref({});
//请求地址携带的类型(只携带列表集合)
const requestAllData = ref([]);
const requestSingleData = ref([]);
const requestMultipleData = ref([]);
const requestJudgeData = ref([]);
const totalQuantity = ref(null);
const mistakesQuantity = ref(null);
//传递数据需要转换成json字符串格式
const dataStr = ref(null);
const userId = ref(null);
//加载函数，请求后端地址
onMounted (() =>{
  userId.value = Taro.getStorageSync('id');
  if(userId.value == null){
    return Taro.navigateBack('/pages/profile/index')
  }
  getDate()
})
  
//请求后端的数据方法
async function getDate() {
  try {
    const wxRequest = config.wxPromisify(wx.request)
    const res = await wxRequest({
      url: `${config.apiUrl}/userAnswer/findIndexData/${userId.value}`,
      method: 'GET',
      header: { 'content-type': 'application/json' }
    })
    console.log('接口返回:', res.data)
    if (res.data.code === '0') {
      indexData.value = res.data.data || []
      updateQuestionData()
    } else {
      Taro.showToast({ title: '获取题目失败', icon: 'none' })
    }
  } catch (err) {
    console.error('请求失败:', err)
    Taro.showToast({ title: '网络错误', icon: 'none' })
  }
}
function updateQuestionData() {
  totalQuantity.value = indexData.value.totalQuantity;
  mistakesQuantity.value = indexData.value.mistakesQuantity;
  requestAllData.value = indexData.value.listByAll;
  requestSingleData.value = indexData.value.listByRadios;
  requestMultipleData.value = indexData.value.listByMultiples;
  requestJudgeData.value = indexData.value.listByJudges;
}

const goToQuestionPage = (type) => {
  if (type === 'single') {
    // 跳转到单选题页面
    dataStr.value = requestSingleData
  } else if (type === 'multiple') {
    // 跳转到多选题页面
    dataStr.value = requestMultipleData
  } else if (type === 'judge') {
    // 跳转到判断题页面
    dataStr.value = requestJudgeData
  }else{
    dataStr.value = requestAllData
  }
  wx.navigateTo({
  url: `/pages/worng/exercise`,
  success: function (res) {
    res.eventChannel.emit('acceptDataFromIndex', {
      data: dataStr.value
    })
  }
})
};
</script>

<style lang="scss">
@use '../../components/wrong.scss'
</style>